<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <style>
        .wrap.female {
            background-image: url('../../image/icon/real_bg.png');
            background-repeat: no-repeat;
            background-size: 100%;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            ;
        }

        .man {
            text-align: center;
        }

        .man .img img {
            width: 150px;
            margin: 50px 0;
        }

        .submit {
            width: calc(50vw - 20px);
            line-height: 40px;
            border-radius: 20px;
            background: #F46CEF;
            color: #fff;
            text-align: center;
            margin: 20px 25vw;
            box-shadow: 0 2px 7px #F46CEF;
        }

        /* 女士特权 */
        .line-wrap {
            position: relative;
            padding: 10px 0;
        }

        .line-wrap p {
            background: #fff;
            padding: 0 20px;
            z-index: 1;
        }

        .line {
            width: 100%;
            height: 1px;
            background: #aaa;
            ;
            position: absolute;
            top: 50%;
        }

        .ul .list {
            width: calc((100% - 10px) / 2);
            margin-right: 10px;
            overflow: hidden;
            border-radius: 3px;
            display: flex;
            align-items: center;
            background: #eee;
            margin-top: 10px;
            height: 40px;
            line-height: 40px;
        }

        .ul .list .item-icon {
            background-image: url('../../image/icon/img_reality_item.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 40px;
            height: 40px;
            display: inline-block;
            margin-right: 10px;
        }

        .ul .list.girl .item-icon {
            background-image: url('../../image/icon/img_goddess_item.png');
        }

        .ul .list span::before {
            background-image: url('../../image/icon/ic_locked_item.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 12px;
            height: 14px;
            display: inline-block;
            margin-right: 5px;
            content: '';
        }

        .ul .list:nth-child(2n) {
            margin-right: 0;
        }

        .warn-tip {
            margin: 10px 0;
            color: #e91e63;
            font-size: 12px;
            text-align: center;
        }

        /* 身份证弹框 */
        #alert-wrap {
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 0;
        }

        #alert-wrap .alert {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 1px 5px 1px #555;
            padding: 10px;
            padding-bottom: 0;
            width: 80vw;
        }

        #alert-wrap .alert .list {
            width: 100%;
        }

        #alert-wrap .alert input {
            width: 100%;
            padding: 0 10px;
        }

        #alert-wrap .alert .btn {
            width: 50%;
            line-height: 50px;
            color: #757575;
        }

        #alert-wrap .alert .btn.sub-btn {
            color: #CD7DFE;
        }
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <div class="wrap new-padding-10" :class="{'female': sex=='女'}">
            <!-- <div class="wrap new-padding-10 female"> -->
            <div class="man" v-if="sex != '女'">
                <div class="img flex-c">
                    <img v-if="ffInfo.is_identity_authentication == 0 || ffInfo.is_identity_authentication == 1" src="../../image/icon/img_face_certification.png" alt="">
                    <img v-if="ffInfo.is_identity_authentication == 2" src="../../image/icon/img_face_certification_pass.png" alt="">
                    <img v-if="ffInfo.is_identity_authentication == 3" src="../../image/icon/img_face_certification_fail.png" alt="">
                </div>
                <h3 class="new-padding-tb-10">{{_i18n('将通过面容识别进行真人认证')}}</h3>
                <p class="tip font-s">{{_i18n('面容识别由系统自动完成，只需十秒。认证成功后即可免费报名女士节目')}}</p>
            </div>
            <div v-if="sex == '女'" style="margin-top: 200px;"></div>
            <p class="warn-tip" v-if="ffInfo.is_identity_authentication == 3 && sex == '女'">{{_i18n('审核未通过')}}</p>
            <button class="submit" v-if="ffInfo.is_identity_authentication == 1">{{_i18n('审核中')}}</button>
            <button class="submit" v-if="ffInfo.is_identity_authentication == 0 || ffInfo.is_identity_authentication == 3" tapmode
                    onclick="_url({url:'rz/rz_img', title:'真人认证'}, 'rz/rz_win')">{{_i18n('真人认证')}}</button>
<!--            <div v-if="sex == '女'">-->
<!--                <div class="line-wrap flex-c">-->
<!--                    <p class="font-s">{{_i18n('认证特权')}}</p>-->
<!--                    <div class="line"></div>-->
<!--                </div>-->
<!--                <ul class="ul flex-w">-->
<!--                    <li class="list">-->
<!--                        <i class="item-icon"></i>-->
<!--                        <span class="font-s">{{_i18n('免费发广播')}}</span>-->
<!--                    </li>-->
<!--                    <li class="list">-->
<!--                        <i class="item-icon"></i>-->
<!--                        <span class="font-s">{{_i18n('评论男士广播')}}</span>-->
<!--                    </li>-->
<!--                    <li class="list">-->
<!--                        <i class="item-icon"></i>-->
<!--                        <span class="font-s">{{_i18n('报名男士广播')}}</span>-->
<!--                    </li>-->
<!--                    <li class="list">-->
<!--                        <i class="item-icon"></i>-->
<!--                        <span class="font-s">{{_i18n('私聊男士')}}</span>-->
<!--                    </li>-->
<!--                    <li class="list girl">-->
<!--                        <i class="item-icon"></i>-->
<!--                        <span class="font-s">{{_i18n('红包照片')}}</span>-->
<!--                    </li>-->
<!--                    <li class="list girl">-->
<!--                        <i class="item-icon"></i>-->
<!--                        <span class="font-s">{{_i18n('收费相册')}}</span>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
        </div>
        <div id="alert-wrap" class=" new-hide">
            <div class="alert">
                <h3>{{_i18n('人脸识别需先填写真实身份证再进行')}}</h3>
                <ul class="ul">
                    <li class="list">
                        <input type="text" id="js-name" :placeholder="_i18n('请输入真实姓名')">
                    </li>
                    <li class="list">
                        <input type="text" id="js-number" :placeholder="_i18n('请输入身份证号')">
                    </li>
                </ul>
                <footer class="flex-bt">
                    <button class="btn" onclick="inputSubmit(0)">{{_i18n('取消')}}</button>
                    <button class="btn sub-btn" onclick="inputSubmit(1)">{{_i18n('确定')}}</button>
                </footer>
            </div>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<!-- <script src="../../script/rz.js"></script> -->
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            sex: $api.getStorage('sex'),
        },
        methods: {
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },

        }
    })

    apiready = function() {
        getUserInfo();
    }

    // 获取用户信息
    function getUserInfo() {
        _getUser(function(ret) {
            view.ffInfo = ret.result;
        })
    }

    // 上传图片并真人识别
    function submit() {
        // _url({url:'rz/rz_img', title:'真人认证'}, 'rz/rz_win')
        // $('#alert-wrap').removeClass('new-hide');
        //     _alert('人脸识别需先上传本人照片再进行', function () {
        //         openPic(function (ret) {
        //             setTimeout(function () {

        //                 console.log(JSON.stringify(ret))
        //             }, 1000)
        //             if (ret.data) {
        //                 dealImg(ret.data, function(img){
        //                     jiaoyan(img);
        //                 })
        //             } else {
        //                 _msg('未选择照片');
        //             }
        //         })
        //     })
    }

    //上传图片
    // function pushImg(img) {
    //     _ajaxFile('add_user_img.php', function (rets, errs) {
    //         console.log(JSON.stringify(ret))
    //         console.log(JSON.stringify(err))
    //         if (rets && rets.code == 200) {
    //             _loadingClose();
    //             _msg('验证成功');
    //             timerWin();
    //         }
    //     }, {
    //         user_id: $api.getStorage('userid'),
    //     }, {
    //         photo_album: img,
    //     })
    // }
    // 填写身份证后获取token
    function inputSubmit(type) {
        if (type == 0) {
            $('#alert-wrap').addClass('new-hide');
            return;
        }
        var number = $.trim($('#js-number').val());
        var name = $.trim($('#js-name').val());
        if (!number) {
            _msg('请输入身份证号');
            return;
        }
        if (!name) {
            _msg('请输入真实姓名');
            return;
        }
        jiaoyan(number, name);
    }
</script>

</html>